<template>
    <div class="">
        <el-row type="flex" class="row-bg" justify="space-between">
            <el-col :span="12">
                <el-button type="primary" size="small" data-id="3" @click="e_add">
                    <i class="el-icon-plus"></i>增加
                </el-button>
                <el-button type="primary" size="small" data-id="3" @click="e_sel(1)">
                    <i class="el-icon-close"></i>已使用
                </el-button>
                <el-button type="primary" size="small" data-id="3" @click="e_sel(0)">
                    <i class="el-icon-check"></i>未使用
                </el-button>
            </el-col>
            <el-col :span="6">
                <el-input placeholder="关键字..." size="small" v-model="searchKey">
                    <el-button slot="append" icon="search" @click="loadData('')"></el-button>
                </el-input>
            </el-col>
        </el-row>
        <template>
            <el-table :data="tableData" border style="width: 100%; text-align: center;margin-top:10px;"
                      v-loading.body="loading" @selection-change="handleSelectionChange">
                <el-table-column type="index" style="width:50%"></el-table-column>
                <el-table-column type="selection"></el-table-column>

                <el-table-column prop="activeCode" header-align="center" label="激活码"></el-table-column>
                <el-table-column prop="createTime" header-align="center" label="生成时间"></el-table-column>
                <el-table-column prop="isUse" header-align="center" label="付款方式">
                    <template slot-scope="scope">
                        <span v-text="checkRegType(scope.row.isUse)"></span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage" :page-sizes="[5,10,20,40]" :page-size="limit"
                           layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </template>

        <!--添加弹框-->
        <el-dialog title="增加认购信息" :visible.sync="itemDialogVisible">
            <el-form :model="currentItem" ref="currentItem" style="margin-left: 30px" label-width="100px">

                <el-form-item label="用户名" prop="huming" :rules="[{ required: true, message: '请输入认购人姓名'}]">
                    <el-input v-model="currentItem.huming" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="开户行" prop="kaihuhang" :rules="[{ required: true, message: '请输入开户行名称'}]">
                    <el-input v-model="currentItem.kaihuhang" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="银行卡号" prop="number" :rules="[{ required: true, message: '请输入开户行卡号'}]">
                    <el-input v-model="currentItem.number" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="支付宝昵称" prop="zfbzh" :rules="[{ required: true, message: '请输入支付宝昵称'}]">
                    <el-input v-model="currentItem.zfbzh" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="支付宝帐号" prop="zhifubao" :rules="[{ required: true, message: '请输入支付宝账号'}]">
                    <el-input v-model="currentItem.zhifubao" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="认购最大值" prop="maxCount" :rules="[{ required: true, message: '请输入认购最大值'}]">
                    <el-input v-model="currentItem.maxCount" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="认购最小值" prop="minCount" :rules="[{ required: true, message: '请输入认购最小值'}]">
                    <el-input v-model="currentItem.minCount" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="认购价格" prop="price" :rules="[{ required: true, message: '请输入认购价格'}]">
                    <el-input v-model="currentItem.price" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item label="认购名称" prop="name" :rules="[{ required: true, message: '请输入认购名称'}]">
                    <el-input v-model="currentItem.name" style="width:500px;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="beforeSaveItem('currentItem')">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
	var qs = require('qs')
	import Editor from '../../components/editor.vue'
	import { tokenGet,jtpost, TokenUrl, tokenPost,delaxios } from '../../api/token.js'

	export default {
		data() {
			return {
				checked: true,
				tableData: [],
				currentPage: 1,
				radio: {
					radioC: '1', //是否可以充值
					radioT: '1', //是否可以提现
					radioD: '1', //充值是否到账
					radioB: '1', //虚拟币类型
					radioY: '1', //是否以太坊
					radioZ: '1', //状态
				},
				typeNumber: [],
				total: 0,
				limit: 10,
				searchKey: '',
				loading: false,
				jinyong: [], //禁用id、
				itemDialogVisible: false,
				currentItem: {},
			}
		},
		methods: {
			handleSizeChange(val) {
				console.log(val)
				this.limit = val
				this.loadData()
			},
			handleCurrentChange(val) {
				console.log(val)
				this.currentPage = val
				this.loadData()
			},
			handleSelectionChange(val) {
				this.typeNumber = val
				this.jinyong = val
				console.log(this.typeNumber)
			},
			/**
			 * @Description: ${获取表格数据}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/11/14
			 * @Version 1.0
			 */
			loadData(isUse='') {
				console.log(isUse)
				this.loading = true
				let searchParams = `${TokenUrl.jiohuoList}?offset=${this.limit * (this.currentPage - 1)}&limit=${this.limit}&searchKey=${this.searchKey}&isUse=${isUse}`
				tokenGet(searchParams).then((response) => {
					console.log(response)
					this.tableData = response.data.data.rows
					this.total = response.data.data.total
					this.loading = false
				}, (response) => {

				})
			},
			e_sel(i){
				this.loadData(i)
            },
			//会员类型判断
			checkMemberType(s) {
				if (s == 0) {
					return '普通会员'
				} else if (s == 1) {
					return '销售商'
				} else if (s == 2) {
					return '生产商'
				}
			},
			// 是否通过实名
			checkISReal(i) {
				if (i == 0) {
					return '否'
				} else if (i == 1) {
					return '是'
				} else if (i == -1) {
					return '未通过'
				}
			},
			// 是否提交过实名
			checkSubReal(i) {
				if (i == 0) {
					return '否'
				} else if (i == 1) {
					return '是'
				}
			},
			// 是否使用
			checkRegType(t) {
				if (t == 0) {
					return '未使用'
				} else if (t == 1) {
					return '已使用'
				}
			},
			// 是否绑定过手机
			checkfisPhone(i) {
				if (i == 0) {
					return '否'
				} else if (i == 1) {
					return '是'
				}
			},
			// 登录方式
			checkLoginType(t) {
				if (t == 0) {
					return '前台'
				} else if (t == 1) {
					return '后台'
				}
			},
			checkIsActive(a) {
				if (a == 0) {
					return '否'
				} else if (a == 1) {
					return '是'
				}
			},
			// ============================================表格数据状态类型判断👆==============================================//
			/**
			 * @Description: ${增加}
			 * @Param
			 * @Return
			 * @Author 焦政
			 * @Date 2018/11/15
			 * @Version 1.0
			 */
			e_add(){
				this.currentItem = {}
				this.itemDialogVisible = true
			},
			beforeSaveItem(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.doSub()
					} else {

						return false;
					}
				});
			},
			doSub(){
				jtpost(TokenUrl.addSub,this.currentItem).then(re=>{
					if(re.status == 0){
						this.$alert('添加成功')
						this.itemDialogVisible = false
						this.currentItem = {}
						this.loadData()
					}else{
						this.$alert(re.msg)
					}
				})
			},
		},

		//引入文本编辑器那个组件
		components: {
			'v-editor': Editor,
		},
		created() {
			this.loadData()
		},
	}
</script>
<style>
    .el-dialog--small {
        width: 60%;
    }
</style>
